Motivation

Visualisations are found everywhere.

They are the key medium for transporting a message.

Some are better than others.

There are largely no standards.

Motivation: Anchor the message

• Grab attention
• Improve access to information (over text)
• Increase precision (over text)
• Bolster credibility: see yourself
• Summarise content

Napoleon’s March on Moscow

The Art of Visualisation (1)

Gauge the sizes, determine the largest piece

The Art of Visualisation (2)

The number of pixels per pie depends on its position

The Art of Visualisation (3)

Sorting the bars by height is easy

The Art of Visualisation (4)

… and arguably even easier with horizontal layout

The Art of Visualisation (5)

A single pixel carries the same information as a large bar

The Art of Visualisation (6)

Faint gridlines help reading off values precisely

The Art of Visualisation (7)

There are options in designing a visualisation!

Purpose

Data visualisations must serve a purpose.

Frequent aim: comparison.

Ask yourself:

• What is the purpose?
• Does the visualisation support the purpose?
• Quickly, Accurately, and Intuitively?

Elements of Charts

Note the defaults: the boxplot function in R has 27 of them.

Layout

• Which axes are to be compared?

Lines

• Lines introduce an order
• No order, no lines

Line types: map style elements to order

• Line thickness
• Dash density for dashed lines
• Brightness (black to white)

Points

If data points overlay (which they generally do)

• Open circles still allow discerning data points
• Smaller dots can be considered

If data points overlay perfectly (example: integer data)

• Consider jittering

Colours

• Colours should serve a purpose: discerning groups of data

Shades of gray

• Have a natural visual hierarchy
• Show varying quantities better than color
• Provide an easily comprehended order to the data measures
• This is the key

Axes

• Should generally start at 0
• Should not have negative numbers with none in the data

Axes (2): Relative changes

Aspect ratio

• Number of pixels allocated to 1 measurement unit in y vs x
• Comparing x and y (example: predicted vs observed data)
• Identical axis limits, aspect ratio = 1 -> square figure

Symbols

Should be intuitive:

• Good: +, bad:-, neutral: 0
• Consider using letters (example: “L”ow, “M”edium, “H”igh)

Ideal case: Single look at the legend to memorize the mapping

Not intuitive: triangles, circles, squares -> repeated looks

Legends

• Should not use up valuable space for data
• May be integrated into the figure

Orientation

• Order: y-axis from low to high, x-axis from left to right
• Time flows from left to right (past to future)
• Longer labels best at the y-axis, horizontally

Auxiliary elements

• Tufte: avoid “chart junk”, elements without information
• My example: the gray background in ggplot2 figures
• No relevant contribution: remove (repeated identical axes)
• Helpful lines (examples: y=0, faint gray lines)
• Smoother to support trend identification
• Confidence band only if relevant (default with R loess)

Auxiliary elements: change

• Symmetric y-axis, line at y=0 -> focus on data

Dimensionality

• Accurate interpretation is not straightforward. Don’t.

Elements of Tables

• Layout
• Digits
• Alignment
• Multiple numbers per cell
• Orientation
• Fonts
• Colours

Tables: Layout

• Choose rows and columns consciously
• Numbers are easier to compare vertically than horizontally
• Generally: variables in columns, observations in rows

Tables: Alignment

Generally helpful:

• Decimal points aligned vertically (monospace fonts?)
• Right adjustment (larger numbers “stick out”)
• Difficult if numbers are very different (e.g., 953 and 0.07)

Tables: Digits

• Unnecessary precision is to be avoided
• R: Digits argument

print(1:7 + 1/(1:7), digits=2)

[1] 2.0 2.5 3.3 4.2 5.2 6.2 7.1

print(1:7 + 1/(1:7), digits=3)

[1] 2.00 2.50 3.33 4.25 5.20 6.17 7.14

format(10+1:7 + 1/(1:7), digits=4)

[1] "12.00" "12.50" "13.33" "14.25" "15.20" "16.17" "17.14"

format(c(1234, 1/1234), digits=3)

[1] "1.23e+03" "8.10e-04"

Tables: Multiple numbers per cell

• Hard to read, better separate columns

Tables: Orientation

• Single landscape pages are a pain
• Consider splitting the table into two

Tables: Fonts and colours

• Some fonts are easier to read than others
• These are usually the standard fonts
• Use of different fonts and colors only for a purpose
• Example: extreme values in boldface or red

Recap: Creating Charts and Tables

• Actively designing charts is recommended
• What is the question?
• Does the visual enable answering the question efficiently?
• Good visualisations increase P(paper gets accepted)
• Visual abstracts come into fashion with journals

What’s wrong with this chart?

Colours

Nicola to add content

Annotations

Nicola to add content

Fonts

Nicola to add content

Alt Text

Alt text (AKA alternative text) is text that describes the visual aspects and purpose of an image – including charts.

Though alt text has various uses, its primary purpose is to aid visually impaired users in interpreting images when the alt text is read aloud by screen readers.

Alt Text

Source: medium.com/nightingale/writing-alt-text-for-data-visualization (Amy Cesal)

Styling for Significance Magazine

Nicola to add content

{RSSthemes} R package

• Colour palettes

• Base R helper functions

• {ggplot2} helper functions

Installation

Installing from GitHub:

remotes::install_github("nrennie/RSSthemes")

Load package:

library(RSSthemes)

Example: plotting with base R

barplot(
  height = table(mtcars$gear),
  col = factor(
    unique(mtcars$gear)
    )
)

set_rss_palette("signif_qual")
barplot(
  height = table(mtcars$gear),
  col = factor(
    unique(mtcars$gear)
    )
)

Example: plotting with ggplot2}

install.packages("ggplot2")

{ggplot2}: basic plot

library(ggplot2)
g <- ggplot(data = mtcars) +
  geom_bar(
    mapping = aes(
      x = cyl,
      fill = factor(vs)
      )
    )
g

{ggplot2}: scales

g +
  scale_fill_rss_d("signif_qual")

{ggplot2}: theme

g +
  scale_fill_rss_d("signif_qual") +
  theme_significance()

Quarto

GitHub

The source code for the guide is stored on GitHub.

If you want to contribute to the guide, the easiest way is via a GitHub pull request.

GitHub link: github.com/royal-statistical-society/datavisguide

Contributor guide: royal-statistical-society.github.io/datavisguide/howto.html#how-to-contribute-to-this-guide

GitHub: Make a fork

GitHub: Clone the repository

GitHub: Make some changes and commit them

Nicola to add content

GitHub: Create a pull request

Nicola to add content

Need help with GitHub?

Ask us!

Conference session: GitHub: Version control for research, teaching and industry, Thu 7th @ 11:40

Links

royal-statistical-society.github.io/datavisguide

github.com/royal-statistical-society/datavisguide

Case study: Football tickets

• Hovering shows available tickets and prices.

• Select Block A3. Note the positioning of pitch and block.

Case study: Football tickets cont’d

Select your seat.

• The map is upside down now (pitch at bottom)!

• Seats available are marked red!

Case study: Football tickets cont’d

Messages:

• Do not confuse the users!

• Use consistent elements (axes, orientations)

• Use intuitive elements (here: colors)

Case Study: Blood Sampling

No of blood samples vs time on conc.-time curve.

Any issues?

Case study: impact factor trend

Any issues?